<template>
  <div>
    <div id="top">
      <div class="header w">
        <div class="logo">
          <img src="../assets/image/zh-hans_logo.png" alt="logo" />
        </div>
        <div class="topNav">
          <span class="projectName">智慧巴士后台管理</span>
        </div>
        <div class="userState">
          <img src="../assets/image/man.png" alt="头像" />
          <span class="nowTime">
            {{ nowTime }}
            <i class="dot"></i>
          </span>
          <span class="userName">{{ userInfo }}</span>
          <span class="logout">
            <i class="logLine"></i>
            <span class="logging" @click="logout">退出</span>
          </span>
          <span class="logout">
            <i class="logLine"></i>
            <span class="logging" @click="updatePasswordShow = true"
              >修改密码</span
            >
          </span>
        </div>
      </div>
    </div>
    <div id="content" class="w">
      <div class="navBox left">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          mode="vertical"
          router
        >
          <el-menu-item index="index" route="/index">公告管理</el-menu-item>
          <el-menu-item index="line" route="/line">附件管理</el-menu-item>
        </el-menu>
      </div>
      <div class="right">
        <router-view />
      </div>
    </div>
    <!-- 密码修改-->
    <el-dialog title="修改密码" :visible.sync="updatePasswordShow" width="30%">
      <el-form :model="staff" label-position="right" label-width="80px">
        <el-form-item label="旧密码">
          <el-input
            placeholder="请输入密码"
            v-model="oldPassword"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input
            placeholder="请输入密码"
            v-model="newPassword"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            placeholder="请输入密码"
            v-model="confirmPassword"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatePasswordShow = false">取 消</el-button>
        <el-button type="primary" @click="updatePasswordCommit"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 引入返回顶部组件 -->
    <v-goTop></v-goTop>
  </div>
</template>
<script>
//导入api
import goTop from "@/components/goTop.vue"; //引入返回顶部组件
import { logout, updateStaffPassWord } from "@/api/apis";
import { getToken, setToken, removeToken } from "@/api/auth";
export default {
  name: "layout",
  data() {
    return {
      userInfo: JSON.parse(sessionStorage.getItem("user")),
      seeResult: true, // 判断是否是可见结果
      nowTime: "", //问候语
      activeIndex: "index", //导航
      updatePasswordShow: false,
      staff: {},
      oldPassword: "",
      newPassword: "",
      confirmPassword: "",
    };
  },
  components: {
    "v-goTop": goTop,
  },
  created() {
    this.newTime();

    // console.log("route", this.$route.name);
    this.activeIndex = this.$route.name; // 导航高亮
  },

  methods: {
    //密码修改提交
    updatePasswordCommit() {
      console.log(this.staff);
      if (
        this.oldPassword == "" ||
        this.newPassword == "" ||
        this.confirmPassword == ""
      ) {
        this.$message({
          type: "error",
          message: "密码不能为空!",
        });
        return;
      }
      if (this.newPassword != this.confirmPassword) {
        this.$message({
          type: "error",
          message: "两次密码不一致,请重试!",
        });
        return;
      }
      return updateStaffPassWord(
        this.userInfo,
        this.newPassword,
        this.oldPassword
      ).then((res) => {
        if (res.code == 20000) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          this.oldPassword = "";
          this.newPassword = "";
          this.confirmPassword = "";
          this.updatePasswordShow = false;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },

    getItme(index) {
      this.activeClass = index; // 把当前点击元素的index，赋值给activeClass
    },

    logout() {
      logout().then((res) => {
        if (res.code == 20000) {
          removeToken();
          this.$message({
            type: "success",
            message: "退出成功!",
          });
          setTimeout(() => {
            this.$router.replace({ path: "/login" });
          }, 500);
        } else {
          this.$message({
            type: "error",
            message: res.msg + "!",
          });
        }
      });
    },

    // -----问候语时间判断------
    newTime() {
      this.nowTime = new Date().getHours();
      if (this.nowTime < 8) {
        this.nowTime = "早上好！";
      } else if (this.nowTime < 12) {
        this.nowTime = "上午好！";
      } else if (this.nowTime < 18) {
        this.nowTime = "下午好！";
      } else if (this.nowTime < 24) {
        this.nowTime = "晚上好！";
      } else {
        this.nowTime = "您好！";
      }
    },
  },
};
</script>
<style lang="less" scoped>
.topNav {
  margin-left: 0px;
  .navBox {
    float: left;
    margin-left: 40px;
    margin-top: 26px;
  }
}

.left {
  width: 180px;
  padding-left: 20px;
  position: fixed;
  height: calc(100vh - 120px);
  overflow: hidden;
  // background-color: #ccc;
  margin-left: 20px;
}
.right {
  width: 960px;
  height: calc(100vh - 120px);
  padding: 20px;
  float: right;
  margin-right: 20px;
  border: 1px solid #efefef;
  border-radius: 2px;
  overflow: hidden;
}
</style>